<template>
  <div>
    <a-card>
      <p class="text-xl font-bold">食材面板</p>
      <a-row :gutter="16">
        <a-col :span="24">
          <div class="flex">
            <div
              @click="router.push(`/inventory/material/purchaseorder`)"
              class="box mx-3 border bg-gradient-to-r from-rose-500 to-rose-300 border-gray-500 p-4 w-72 h-32 rounded-md hover:shadow-xl shadow-gray-400/100 hover:scale-105 transition-all duration-300 cursor-pointer"
            >
              <p
                class="text-xl text-black font-bold border-b-2 border-gray-900"
              >
                进货管理
              </p>
              <span class="text-gray-700">食材，作料，粗加工</span>
              <AccountBookOutlined class="icon" />
            </div>
            <DoubleRightOutlined />
            <div
              @click="router.push(`/inventory/material/saleorder`)"
              class="box mx-3 border border-gray-500 bg-gradient-to-r from-violet-500 to-violet-300 p-4 w-72 h-32 rounded-md hover:shadow-xl shadow-gray-400/100 hover:scale-105 transition-all duration-300 cursor-pointer"
            >
              <p
                class="text-xl text-black font-bold border-b-2 border-gray-900"
              >
                出库管理
              </p>
              <span class="text-gray-700">去损管理，统计损耗</span>
              <BarcodeOutlined class="icon" />
            </div>
            <DoubleRightOutlined />
            <div
              @click="router.push(`/inventory/material/inventorycount`)"
              class="box mx-3 border border-gray-500 bg-gradient-to-r  from-orange-500 to-orange-300 p-4 w-72 h-32 rounded-md hover:shadow-xl shadow-gray-400/100 hover:scale-105 transition-all duration-300 cursor-pointer"
            >
              <p
                class="text-xl text-black font-bold border-b-2 border-gray-900"
              >
                盘点管理
              </p>
              <span class="text-gray-700">去损管理，统计损耗</span>
              <CalculatorOutlined class="icon" />
            </div>
            <DoubleRightOutlined />
            <div
              @click="router.push(`/inventory/material/stock`)"
              class="box mx-3 border border-gray-500 bg-gradient-to-r  from-lime-500 to-lime-300 p-4 w-72 h-32 rounded-md hover:shadow-xl shadow-gray-400/100 hover:scale-105 transition-all duration-300 cursor-pointer"
            >
              <p
                class="text-xl text-black font-bold border-b-2 border-gray-900"
              >
                数据分析
              </p>
              <span class="text-gray-700">数据分析</span>
              <FundProjectionScreenOutlined class="icon" />
            </div>
            <DoubleRightOutlined />
            <div
              @click="router.push(`/inventory/material/statistics`)"
              class="box mx-3 border border-gray-500 bg-gradient-to-r  from-green-500 to-green-300 p-4 w-72 h-32 rounded-md hover:shadow-xl shadow-gray-400/100 hover:scale-105 transition-all duration-300 cursor-pointer"
            >
              <p
                class="text-xl text-black font-bold border-b-2 border-gray-900"
              >
                数据报表
              </p>
              <span class="text-gray-700">报表</span>
              <InsertRowAboveOutlined class="icon" />
            </div>
          </div>
        </a-col>
      </a-row>
    </a-card>
    <a-card class="mb-2 mt-2">
      <a-row>
        <a-col :span="8">
          <p>
            历史报价
            <HuluTooltip> 查看历史报价情况，系统根据最新报价开单 </HuluTooltip>
          </p>

          <a-button
            type="primary"
            @click="router.push(`/inventory/material/historyquote`)"
          >
            查看
          </a-button>
        </a-col>
        <a-col :span="8">
          <p>
            模板导入
            <HuluTooltip> 下载模板并按照规范填写，生成最新报价表 </HuluTooltip>
          </p>
          <a-space>
            <a-button type="primary"> 下载 </a-button>
            <a-upload
              :multiple="false"
              v-model:file-list="currentFile"
              accept=".xls, .xlsx, .csv"
              name="file"
              action="/api/admin/excel/material/upload"
              :headers="{
                Authorization: `Bearer ${token}`,
              }"
              @change="handleChange"
            >
              <a-button>
                <upload-outlined></upload-outlined>
                导入
              </a-button>
            </a-upload>
            <a-alert message="限EXCEL,xlsx后缀格式" type="warning" show-icon />
          </a-space>
        </a-col>
        <a-col :span="8">
          <p>
            货单模板
            <HuluTooltip> 根据模板进行采购，提高效率 </HuluTooltip>
          </p>
          <a-button
            type="primary"
            @click="router.push(`/inventory/material/materialtemplate`)"
          >
            管理模板
          </a-button>
        </a-col>
      </a-row>
    </a-card>
    <a-card>
      <vxe-button status="primary" icon="vxe-icon-add" @click="addEvent"
        >新增</vxe-button
      >
      <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvent">
        <template #preview="{ row }">
          <a-image :width="40" :src="row.preview" />
        </template>
        <template #action="{ row }">
          <a-space>
            <a-button type="primary" @click="editRow(row)">编辑</a-button>
            <a-popconfirm title="确定删除吗？" @confirm="remove(row)">
              <a-button type="primary" danger>删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </vxe-grid>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import {
  DoubleRightOutlined,
  UploadOutlined,
  AccountBookOutlined,
  BarcodeOutlined,
  CalculatorOutlined,
  FundProjectionScreenOutlined,
  InsertRowAboveOutlined,
} from "@ant-design/icons-vue";
import { VxeUI } from "vxe-pc-ui";
import Api from "@/api/backend/api";
import XEUtils from "xe-utils";
import { message } from "ant-design-vue";
const { gridOptions } = useMaterial();
const router = useRouter();
const xGrid = ref();
const currentFile = ref();
const userStore = useUserStore();
const token = userStore.token;
const gridEvent: VxeGridListeners<RowVO> = {
  proxyQuery() {
    console.log("数据代理查询事件");
    const grid = xGrid.value;
  },
  proxyDelete() {
    console.log("数据代理删除事件");
  },
  proxySave() {
    console.log("数据代理保存事件");
  },
};

const addEvent = (row) => {
  router.push("/inventory/material/create");
};

const handleChange = (info: UploadChangeParam) => {
  const status = info.file.status;
  if (status !== "uploading") {
    // console.log(info.file, info.fileList);
  }
  if (status === "done") {
    message.success(`${info.file.name} 上传成功.`);
  } else if (status === "error") {
    message.error(`${info.file.name} 上传失败.`);
  }
  if (info.file.status === "done") {
    // 替换当前上传文件列表为最新的上传成功的文件
    currentFile.value = [info.file];
  } else if (info.file.status === "removed") {
    // 如果文件被移除，则清空当前文件
    this.currentFile = null;
  }
};
const editRow = (row) => {
  router.push(`/inventory/material/${row.id}/edit`);
};
const remove = async (row) => {
  await Api.materialController.destroy({
    id: row.id,
  });
  xGrid.value.commitProxy("query");
};
</script>

<style scoped lang="less">
.box {
  position: relative;
  .icon {
    color: white;
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    z-index: 0;
    font-size: 64px;
  }
}
</style>
